<template>
    <div>
        <a-row>
            <a-card title="基本信息">
                <a href="#" slot="extra" @click="() => { $router.go(-1) }">返回</a>
                 <a-row>
                    <a-col span="6">
                        住户姓名：{{infoData.name || '暂无'}}
                    </a-col>
                    <a-col span="6">
                        手机号：{{infoData.phone || '暂无'}}
                    </a-col>
                    <a-col span="6">
                        住户标签：{{infoData.labels || '暂无'}}
                    </a-col>
                </a-row>
            </a-card>
        </a-row>
        <br>
        <a-row v-if="key === '欠费'">
            <a-card :tabList="tabList" :activeTabKey="key" @tabChange="key => onTabChange(key, 'key')">
                <a-row>
                    <a-col span="3">
                        <!-- <a-button block @click="add">添加临时收费</a-button> -->
                        <a-modal
                            title="添加临时收费"
                            :visible="addVisible"
                            :afterClose="() => { form.resetFields(); }"
                            @ok="add_pay"
                            @cancel="cancel_pay"
                        >
                            <a-row>
                            <a-form :form="form" @submit="add_pay">
                                <a-form-item label="项目/标准" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-cascader :options="options" placeholder="请选择收费项目/标准" v-decorator="['project',
                                        {
                                            rules: [{required: true,message:'请选择收费项目/标准'}]
                                        }
                                    ]" @change="selectProject"/>
                                </a-form-item>
                                <a-form-item label="单价" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-input type="number" @change="alls" v-model="l_price" placeholder="请输入单价"></a-input>
                                </a-form-item>
                                <a-form-item label="数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-input type="number" @change="alln" v-model="l_num" placeholder="请输入数量"></a-input>
                                </a-form-item>
                                <a-form-item label="金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-input type="number" @change="allj" v-model="l_money" placeholder="请输入金额"></a-input>
                                </a-form-item>
                                <a-form-item label="起止时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-range-picker @change="qizhi" v-model="vvt"  />
                                </a-form-item>
                                <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-input v-decorator="['remarks']"></a-input>
                                </a-form-item>
                            </a-form>
                            </a-row>
                        </a-modal>
                    </a-col>
                    <!-- <a-col span="3" offset="1">
                        <a-button block  @click="add_time">交费到指定时间</a-button>
                        <a-modal
                            title="交费到指定时间"
                            :visible="addTimeVisible"
                            @ok="add_time_pay"
                            @cancel="cancel__time_pay"
                        >
                            <a-row>
                            <a-form :form="formTime" @submit="add_pay">
                                <a-form-item label="指定时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-date-picker style="width:100%"  placeholder="请选择指定时间" v-decorator="['pay_time',{rules:[{required:true,message:'请选择指定时间'}]}]" />
                                </a-form-item>
                            </a-form>
                            </a-row>
                        </a-modal>
                    </a-col> -->
                    <a-col span="2" offset="1">
                        <a-button id="print_true" :disabled="true" @click="print_c">打印</a-button>
                        <a-modal title="打印" :visible="print_lop" :width="600" @ok="ok_print" @cancel="cancel_print">
                            <a-row>
                                <a-col span="15">
                                    模板：
                                    <a-select style="width: 240px" @change="print_func">
                                        <a-select-option v-for="(item,i) in modelList" :key="i">
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-col><br/>
                                <!--<a-row>-->
                                    <!--合并账单：-->
                                    <!--<a-switch @click="print_plus">-->

                                    <!--</a-switch>-->
                                <!--</a-row>-->
                            </a-row>
                        </a-modal>
                    </a-col>
                    <a-col span="2">
                        <a-button class="shou_color" @click="pay">收款</a-button>
                        <a-modal
                            title="收款"
                            :visible="payVisible"
                            :afterClose="skClose"
                            :width="900"
                            @ok="ok_pay"
                            @cancel="cancel_pay"
                        >
                        <a-row>
                            <a-col span="5">
                                应收合计：¥{{ allPrice }}
                            </a-col>
                            <a-col span="5">
                                优惠：- ¥{{ allOffer }}
                            </a-col>
                            <a-col span="5">
                                滞纳金：+ ¥{{ allOverdue }}
                            </a-col>
                            <a-col span="5">
                                预存款抵扣：- ¥{{ allDeduction }}
                            </a-col>
                            <a-col span="4">
                                应缴合计：¥{{ this.adt(user_money) }}
                            </a-col>
                        </a-row>
                        <br>
                        <a-row>
                            <a-form :form="payform" @submit="ok_pay">
                                <template v-if="infoData.users.length > 0">
                                    <a-form-item  label="缴费人" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}" >
                                        <a-select placeholder="请选择缴费人" v-decorator="['user', {
                                            rules: [{required: true,message:'请选择缴费人'}]
                                        }]">
                                            <a-select-option v-for="(item, index) in infoData.users" :value="item.id" :key="index">
                                                {{ item.name }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </template>
                                <template v-else>
                                    <a-form-item  label="缴费人" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}" >
                                        <a-input placeholder="请输入缴费人" v-decorator="['username',{rules:[{required:true,message:'请输入缴费人'}]}]"/>
                                    </a-form-item>
                                    <a-form-item  label="手机号" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}" >
                                        <a-input placeholder="请输入手机号" v-decorator="['phone',{rules:[{required:true,message:'请输入手机号'}]}]"/>
                                    </a-form-item>
                                </template>
                                <a-form-item label="折扣" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}">
                                    <a-input v-decorator="['zk']" addonAfter='折' @change="changeZk($event)" ref="zkv"></a-input>
                                </a-form-item>
                                <a-form-item label="备注" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}">
                                    <a-input v-decorator="['remarks']"></a-input>
                                </a-form-item>
                                <a-form-item label="收款方式" :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 14 }}">
                                    <a-select v-decorator="['pay_style', {
                                        rules: [{required: true,message:'收款方式不能为空'}]
                                    }]">
                                        <a-select-option value="1">
                                            线下支付-现金
                                        </a-select-option>
                                        <a-select-option value="2">
                                            线下支付-支票
                                        </a-select-option>
                                        <a-select-option value="3">
                                            线下支付-银行转账
                                        </a-select-option>
                                        <a-select-option value="4">
                                            线下支付-pos机刷卡
                                        </a-select-option>
                                        <a-select-option value="5">
                                            线下支付-支付宝直接转账
                                        </a-select-option>
                                        <a-select-option value="6">
                                            线下支付-微信直接转账
                                        </a-select-option>
                                        <a-select-option value="7">
                                            小区收款码-支付宝
                                        </a-select-option>
                                        <a-select-option value="8">
                                            小区收款码-微信
                                        </a-select-option>
                                        <a-select-option value="9">
                                            网上缴费1
                                        </a-select-option>
                                        <a-select-option value="10">
                                            网上缴费2
                                        </a-select-option>
                                        <a-select-option value="11">
                                            网上缴费3
                                        </a-select-option>
                                        <a-select-option value="12">
                                            账户余额
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-form>
                        </a-row>
                        </a-modal>
                    </a-col>
                    <a-col>
                        已选部分应缴：<span style="color: red;font-weight: 600">¥{{ this.adt(user_money) }}</span>元
                    </a-col>
                </a-row>
                <br>
                <a-row>
                    <s-table :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data="getHis" ref="table" rowKey="id">
                        <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
                        <template slot="one_money" slot-scope="text, record">
                            ¥{{text}}
                        </template>
                        <template slot="price" slot-scope="text, record">
                            ¥{{text}}
                        </template>
                        <template slot="money" slot-scope="text, record">
                            ¥{{text}}
                        </template>
                        <template slot="offer" slot-scope="text, record">
                            ¥{{text}}
                            <a-icon @click="exportModal(record.id, 'offer',record.offer,record.price)" style="cursor: pointer;" type="edit"></a-icon>
                        </template>
                        <template slot="overdue" slot-scope="text, record">
                            ¥{{text}}
                            <a-icon @click="exportModal(record.id, 'overdue',record.overdue)" style="cursor: pointer;" type="edit"></a-icon>
                        </template>
                        <template slot="remarks" slot-scope="text, record">
                            <a-tooltip placement="left">
                                <template slot="title">
                                    <p v-for="(item,index) in record.remark_list">{{item}}</p>
                                </template>
                                <a-icon type="bars" style="cursor: pointer;">{{text}}</a-icon>
                            </a-tooltip>
                        </template>
                    </s-table>
                </a-row>
            </a-card>
            <a-modal
                    title="设置优惠"
                    :visible="exportVisible"
                    @ok="exportOk('offer')"
                    @cancel="exportCancel('offer')"
            >
                <a-row>
                    <a-form>
                        <!--<a-col span="24">-->
                            <!--<a-form-item label="优惠方式" :label-col="labelCol" :wrapper-col="wrapperCol">-->
                                <!--<a-select placeholder="优惠方式" @change="yh_change" defaultValue="1" >-->
                                    <!--<a-select-option value="1">按优惠值</a-select-option>-->
                                    <!--<a-select-option value="2">按优惠率</a-select-option>-->
                                <!--</a-select>-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->
                        <a-col span="24">
                            <a-form-item v-if="yh_type == 1" label="选择优惠" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder='选择优惠' @change="yh_jine">
                                    <a-select-option value="">不使用优惠</a-select-option>
                                    <a-select-option v-for="(item,index) in yh_list" :value="index">{{item.name_s}}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item v-if="yh_type == 2" label="优惠比例" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input addonAfter="%" v-model="yh_price" />
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-model="yh_bz"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-row>
            </a-modal>
            <a-modal
                    title="设置滞纳金"
                    :visible="exportVisible2"
                    @ok="exportOk('overdue')"
                    @cancel="exportCancel('overdue')"
            >
                <a-row>
                    <a-form>
                        <a-col span="24">
                            <a-form-item label="滞纳金" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input addonAfter="元" v-model="yh_price" />
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-input v-model="yh_bz"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-row>
            </a-modal>
        </a-row>
        <a-row v-if="key === '历史缴费'">
            <a-card :tabList="tabList" :activeTabKey="key" @tabChange="key => onTabChange(key, 'key')">

                <a-table :columns="columns2" :data="recordData">
                    <template slot="one_money" slot-scope="text, record">
                        ¥{{text}}
                    </template>
                    <template slot="price" slot-scope="text, record">
                        ¥{{text}}
                    </template>
                    <template slot="money" slot-scope="text, record">
                        ¥{{text}}
                    </template>
                    <template slot="remarks" slot-scope="text, record">
                        <a-tooltip placement="left">
                            <template slot="title">
                                <p v-for="(item,index) in record.remark_list">{{item}}</p>
                            </template>
                            <a-icon type="bars" style="cursor: pointer;">{{text}}</a-icon>
                        </a-tooltip>
                    </template>
                </a-table>
            </a-card>
        </a-row>
        <div v-show="false" id="model_t">
            <div style="font-size: 20px;text-align: center;font-weight:bold;">智慧物业缴费通知单</div>
            <div>
                <span>小区：{{infoData.bd_info_text}}</span>
                <span style="padding-left: 30px">房间号：{{infoData.name}}</span>
                <span style="padding-left: 30px">住户姓名：{{name_h}}</span>
            </div>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                <tr style="border-bottom: 1px solid #000000;">
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">类型</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">房屋/车位/车辆</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">费用名称</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">开始时间</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">结束时间</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">单价</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">数量</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">应收金额</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">优惠</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">滞纳金</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">预存款抵扣</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">应缴金额</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">备注</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in selectArr">
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.type_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.info}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.name}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.start_time}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.end_time}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.one_money}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.num}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.price}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.offer}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.overdue}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.deduction}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.money}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.remarks}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    
</template>

<script>
import { getHisPayment,house_info_no_pay, getCashierFormula, saveCashierHouse, getHouseUser, housePay, setNoPayMoney, getProjectFix,dep_det } from '@/api/cashier'
import EditableCell from './EditableCell';
import {STable} from '@/components'
import moment from 'moment';
import { mapGetters } from 'vuex'
import { getLodop } from '@/utils/LodopFuncs'
const recordColumns = [
  { title: '类型', width: 100, dataIndex: 'type', key: 'type', fixed: 'left' },
  { title: '小区', width: 100, dataIndex: 'bd_info_id', key: 'bd_info_id', fixed: 'left' },
  { title: '房屋/车位/车辆/住户', width: 200, dataIndex: 'info', key: 'info', fixed: 'left' },
  { title: '费用名称', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', width: 150 },
  { title: '开始时间', dataIndex: 'start_time', key: '1', width: 150 },
  { title: '结束时间', dataIndex: 'end_time', key: '2', width: 150 },
  { title: '单价', dataIndex: 'price', key: '3', width: 100 },
  { title: '数量', dataIndex: 'num', key: '4', width: 100 },
];
const n = new Date();
const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate());
const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate());
import { house_info } from '@/api/cashier'
  export default {
    name: 'charge_cashier_houseDetail',
    components: {
      EditableCell,
      STable
    },
    data() {
        return {
            loading:false,
            spinning:false,
            modelList: [],
            tabList: [{key: '欠费', tab: '欠费'}, {key: '历史缴费', tab: '历史缴费'}],
            form: this.$form.createForm(this),
            payform: this.$form.createForm(this),
            formTime: this.$form.createForm(this),
            tabListNoTitle: [{
                key: '欠费',
                tab: 'article',
            }, {
                key: '历史交费',
                tab: 'app',
            }, {
                key: 'project',
                tab: 'project',
            }],
            key: '欠费',
            recordColumns,
            recordData:parameter => {
                return getHisPayment(Object.assign(parameter, {id: this.$route.params.house_id,token:this.token(),type:4})).then(res => {
                    return res.data
                }).catch(err => {
                    console.log(err)
                })
             },
            columns: [{
                title: '类型',
                dataIndex: 'type_text',
                key: 'type_text'
            }, {
                title: '房屋/车位/车辆',
                dataIndex: 'info',
                key: 'info'
            }, {
                title: '费用名称',
                dataIndex: 'name',
                key: 'name'
            },  {
                title: '开始时间',
                dataIndex: 'start_time',
                key: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time',
                key: 'end_time'
            }, {
                title: '单价',
                dataIndex: 'one_money',scopedSlots: { customRender: 'one_money' },
                key: 'one_money',align:'right'
            }, {
                title: '数量',
                dataIndex: 'num',
                key: 'num'
            }, {
                title: '应收金额',align:'right',
                dataIndex: 'price',scopedSlots: { customRender: 'price' },
                key: 'price'
            }, {
                title: '优惠',
                dataIndex: 'offer',
                key: 'offer',align:'right',
                scopedSlots: { customRender: 'offer' },
            }, {
                title: '滞纳金',
                dataIndex: 'overdue',
                key: 'overdue',align:'right',
                scopedSlots: { customRender: 'overdue' },
            }, 
            // {
            //     title: '预存款抵扣',
            //     dataIndex: 'deduction',
            //     key: 'deduction'
            // },
             {
                title: '应缴金额',
                dataIndex: 'money',align:'right',
                key: 'money',scopedSlots: { customRender: 'money' }
            }, {
                title: '备注',
                dataIndex: 'remarks',
                key: 'remarks',
                scopedSlots: { customRender: 'remarks' },
            }],
            columns2: [{
                title: '类型',
                dataIndex: 'type_text',
                key: 'type_text'
            }, {
                title: '房屋/车位/车辆',
                dataIndex: 'info',
                key: 'info'
            }, {
                title: '费用名称',
                dataIndex: 'name',
                key: 'name'
            }, {
                title: '开始时间',
                dataIndex: 'start_time',
                key: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time',
                key: 'end_time'
            }
            , {
                title: '单价',
                dataIndex: 'one_money',align:'right',
                key: 'one_money',scopedSlots: { customRender: 'one_money' }
            }, {
                title: '数量',
                dataIndex: 'num',
                key: 'num'
            }, {
                title: '应收金额',
                dataIndex: 'price',align:'right',
                key: 'price',scopedSlots: { customRender: 'price' }
            }, {
                title: '优惠',
                dataIndex: 'offer',
                key: 'offer',
                scopedSlots: { customRender: 'offer' },
            }, {
                title: '滞纳金',
                dataIndex: 'overdue',
                key: 'overdue',align:'right',
                scopedSlots: { customRender: 'overdue' },
            },
            //  {
            //     title: '预存款抵扣',
            //     dataIndex: 'deduction',
            //     key: 'deduction'
            // }, 
            {
                title: '实收金额',
                dataIndex: 'money',align:'right',
                key: 'money',scopedSlots: { customRender: 'money' }
            }, {
                title: '备注',
                dataIndex: 'remarks',
                key: 'remarks',
                scopedSlots: { customRender: 'remarks' },

            }],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 }
            },
            getHis:parameter => {
                return house_info_no_pay(Object.assign(parameter, {id: this.$route.params.house_id,token:this.token(),type:4})).then(res => {
                    return res.data
                }).catch(err => {
                    console.log(err)
                })
             },
            infoData: {
                bd_info_text: '暂无',
                building_text: '暂无',
                name: '暂无',
                labels: '暂无',
                users: '暂无',
                user_text: '暂无'
            },
            addVisible: false,
            addTimeVisible: false,
            payVisible: false,
            print_lop: false,
            print_m: false,
            print_p: false,
            vvt:[moment(this.st, this.dateFormat), moment(this.et, this.dateFormat)],
            l_price:'',
            l_num:'',
            l_money:'',
            price_id:0,
            price_offer:0,
            price_overdue:0,
            price_remark:'',
            price_type:'',
            one_num:0,
            one_price:0,
            yh_price:0,
            yh_val:0,
            zk_val:0,
            yh_bz:'',
            name_h: '',
            print_model: [],
            options: [],
            rangeConfig: {
                rules: [{ type: 'array',initialValue:[moment(startToday, 'YYYY-MM-DD'), moment(endToday, 'YYYY-MM-DD')], required: true, message: '请选择起始时间' }],
            },
            selectArr: [],
            allPrice: 0,
            allOffer_befor: 0,
            allOverdue: 0,
            allDeduction: 0,
            user_money: 0,
            users: [],
            yh_list:[],
            yh_b:0,
            yh_type:1,
            exportVisible:false,
            exportVisible2:false,
            exportVisible3:false,
            selectedRowKeys: [],
            st:startToday,
            et:endToday,
            dateFormat: 'YYYY/MM/DD',

        }
    },
    
    mounted() {
        // todo 获取初始化数据
        this.getHouseInfo();
        this.getDepInfo();
        this.getYhList()
    },
    methods: {
        moment,
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        yh_jine(v){
            if (v >= 0) {
                if (this.yh_list[v].style == 1) {
                    let pt = (1 - this.yh_list[v].price).toFixed(3);
                    this.yh_price = this.yh_b * pt;
                } else {
                    this.yh_price = this.yh_list[v].fixed_price;
                }
            } else {
                this.yh_price = 0;
            }
            this.yh_bz = this.yh_list[v].name;
        },
        getYhList(){
            return new Promise((resolve, reject) => {
                this.loading = true;
                this.axios({
                    method:'post',
                    url:'/houses/yh_list',
                    data:Object.assign({token:this.token()})
                }).then(res => {
                    this.yh_list = res.data;
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                }).finally(() => {
                });
            });
        },
        alls (v) {
            var reg=/^[0-9]+.?[0-9]*$/;
            if(!reg.test(v.target.value) && v.target.value){
                this.l_price = '';
                this.$message.error('请输入数字');return;
            }
            if(v.target.value < 0){
                this.l_price = 0;
                this.$message.error('不能为负数');return;
            }
            this.one_price = v.target.value;
            let asi = v.target.value * this.one_num;
            this.l_money = asi.toFixed(2);
        },
        adt(v){
            return v.toFixed(2);
        },
        alln (v) {
            var reg=/^[0-9]+.?[0-9]*$/;
            if(!reg.test(v.target.value) && v.target.value){
                this.l_num = '';
                this.$message.error('请输入数字');return;
            }
            if(v.target.value < 0){
                this.l_num = 0;
                this.$message.error('不能为负数');return;
            }
            this.one_num = v.target.value;
            let asi = v.target.value * this.one_price;
            this.l_money = asi.toFixed(2);
        },
        allj (v) {
            var reg=/^[0-9]+.?[0-9]*$/;
            if(!reg.test(v.target.value) && v.target.value){
                this.l_money = '';
                this.$message.error('请输入数字');return;
            }
            if(v.target.value < 0){
                this.l_money = 0;
                this.$message.error('不能为负数');return;
            }
            this.one_num = v.target.value;
            this.l_money = v.target.value;
        },
        onTabChange (key, type) {
            // if (key == '欠费') {
            //     this.h_type = 0;
            // } else {
            //     this.h_type = 1;
            // }
            // this.queryParam['id'] = this.$route.params.house_id;
            // this.queryParam['h_type'] = this.h_type;
            // this.queryParam['type'] = 4;
            this[type] = key
        },
        // 获取基础信息
        getHouseInfo() {
            let name_h = '';
            house_info({id: this.$route.params.house_id,token:this.token(),type:4}).then(res => {
                this.infoData.bd_info_text = res.data.bd_info_text
                this.infoData.building_text = res.data.building_text
                this.infoData.name = res.data.name
                this.infoData.labels = res.data.labels
                this.infoData.user_text = res.data.user_text
                for (var i=0;i < res.data.users.length;i++) {
                    if(name_h){
                        name_h=res.data.users[i].name;
                    }else{
                        name_h +=',' + res.data.users[i].name;
                    }
                }
                this.name_h = name_h;
                this.modelList = res.data.model;
                this.data = res.data.no_pay
            }).catch(err => {
                console.log(err)
            })
        },
        exportModal(v,e,t,m=0) {
            this.price_id = v;
            this.price_type = e;
            this.yh_price = t;
            this.yh_b = m;
            this.yh_bz='';
            if (e == 'offer') {
                this.yh_type = 1;
                this.yh_val = t;
                this.exportVisible = true
            } else if (e == 'overdue'){
                this.zk_val = t;
                this.exportVisible2 = true
            }
        },
        exportCancel(v) {
            if (v == 'offer') {
                this.yh_val = 0;
                this.exportVisible = false
            } else if (v == 'overdue'){
                this.zk_val = 0;
                this.exportVisible2 = false
            }
        },
        exportOk(v) {
            this.exportVisible = false;
            this.exportVisible2 = false;
            setNoPayMoney({id: this.price_id, name: v,type:this.yh_type,value:this.yh_price,bz:this.yh_bz,token:this.token()}).then(res => {
                if (res.code == 0) {
                    if (v == 'offer') {
                        if (this.selectArr.length !== 0) {
                            this.user_money = (this.user_money * 100 - this.yh_price * 100 + this.yh_val * 100) / 100;
                            this.allOffer = parseInt(this.yh_price * 100)/100;
                            this.allOffer_pay = parseInt((this.allOffer + (this.yh_price - this.yh_val))*100)/100;
                            this.yh_val = 0;
                        }
                    } else {
                        if (this.selectArr.length !== 0) {
                            this.user_money = (this.user_money * 100 + this.yh_price * 100 - this.zk_val * 100) /100;
                            this.allOverdue = parseInt(this.yh_price * 100)/100;
                            this.allOverdue_pay = parseInt((this.allOverdue + (this.yh_price - this.zk_val))*100)/100;
                            this.zk_val = 0;
                        }
                    }
                    this.exportVisible = false;
                    this.exportVisible2 = false;
                    this.$message.success(res.msg,1);
                    this.$refs.table.refresh(false);
                } else {
                    this.$message.success(res.msg);
                }
            })
        },
        yh_change(v){
            this.yh_type = v;
        },
        print_c(){
            LODOP = getLodop();
            this.print_lop = true;
        },
        cancel_print() {
            this.print_lop = false;
        },
        print_func(v){
            this.print_m = v + 1;
            this.print_model = this.modelList[v];
        },
        getDepInfo() {
            dep_det({token:this.token()}).then(res => {
                this.modelList = res.data.model;
            }).catch(err => {
                console.log(err)
            })
        },
        skClose(){
            // this.allPrice=0
            // this.allOffer=0
            // this.allOverdue=0
            // this.allDeduction=0
            // this.user_money=0
            this.payform.resetFields()
        },
        print_plus(v){
            this.print_p = v;
        },
        ok_print() {
            if (this.print_m) {
                LODOP = getLodop();
                LODOP.PRINT_INIT("打印通知单");
                LODOP.ADD_PRINT_HTM(this.print_model.range_t,this.print_model.range_l,600,300,document.getElementById("model_t").innerHTML);
                LODOP.SET_PRINT_PAGESIZE(this.print_model.layout,this.print_model.p_width,this.print_model.p_height,'A'+this.print_model.paper_type);
                var lit = this.selectArr;
                let money = 0;
                for (var i=0;i<lit.length;i++) {
                    money += Number(this.selectArr[i].money);
                }
                LODOP.ADD_PRINT_TEXT(200 + (30 * lit.length),30,300,20,"合计：￥" + money);
                LODOP.ADD_PRINT_TEXT(220 + (30 * lit.length),30,300,20,"说明：所有款项请限缴费日期之前缴清");
                LODOP.ADD_PRINT_TEXT(240 + (30 * lit.length),480,300,20,"扫码支付");
                LODOP.PREVIEW();
            } else {
                this.$message.error('请选择模板');
            }
        },
        onSelectChange(selectedRowKeys, selectedRows){
            // console.log(selectedRowKeys);
            // console.log(selectedRows);
            this.selectedRowKeys = selectedRowKeys
            if(selectedRowKeys.length > 0) {
                document.getElementById('print_true').disabled='';
                
                let tempDateArr=this.selectArr.concat(selectedRows);
                
                let tempArr=[];
                console.warn(tempDateArr)
                selectedRowKeys.forEach((items,keys)=>{
                    let flages=0
                    let temped={}
                    for(let i in tempDateArr){
                        if(tempDateArr[i].id==items){
                            temped=tempDateArr[i]
                            flages=1
                        }
                    }
                    if(flages){
                        tempArr.push(temped);
                    }
                })
                this.selectArr=tempArr
                // console.log(this.selectArr)
                let price = 0
                let offer = 0
                let overdue = 0
                let deduction = 0
                let money = 0
                for(let i in this.selectArr) {
                        price += Number(this.selectArr[i].price)
                        offer += Number(this.selectArr[i].offer)
                        overdue += Number(this.selectArr[i].overdue)
                        deduction += Number(this.selectArr[i].deduction)
                        money += Number(this.selectArr[i].money)
                }
                money = (price * 100 - offer * 100 + overdue * 100) /100;
                this.allPrice = parseInt(this.adt(price)*100)/100
                this.allOffer =  parseInt(this.adt(offer)*100)/100
                this.allOffer_befor =  this.allOffer;
                this.allOverdue = parseInt(this.adt(overdue)*100)/100
                this.allDeduction = parseInt(this.adt(deduction)*100)/100
                this.user_money = money;
            } else {
                document.getElementById('print_true').disabled=true;
                this.selectArr = []
                this.user_money = 0
            }
        },
        // 获取历史欠费
        getPayList(param) {
            getHisPayment({id: this.$route.params.house_id,token:this.token(),type:4}).then(res => {
                this.recordData = res.data
            }).catch(err => {
                console.log(err)
            })
        },

        getFormula() {
            getCashierFormula({token:this.token()}).then(res => {
                this.options = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        add() {
            this.getFormula()
            this.addVisible = true
        },
        cancel_pay() {
            this.l_price = '';
            this.l_money = '';
            this.l_num = '';
            this.one_num = 0;
            this.vvt = [moment(startToday, this.dateFormat), moment(endToday, this.dateFormat)];
            // this.user_money = this.user_money + this.allOffer;
            // this.allOffer = this.allOffer_befor;
            this.addVisible = false
            this.payVisible = false
        },
        qizhi(v){
            this.st = v[0];
            this.et = v[1];
        },
        add_pay(e) {
            e.preventDefault();
            this.form.validateFields((err, fieldsValue) => {
                if (!err) {
                    // const rangeValue = fieldsValue['time'];
                    const values = {
                        ...fieldsValue,
                        // 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
                        'house_id': this.$route.params.house_id,
                        'type':4
                    };
                    values.price = this.l_price;
                    values.money = this.l_money;
                    values.num = this.l_num;
                    this.st = new Date(this.st);
                    this.et = new Date(this.et);
                    values.rangepicker = [this.formatDate(this.st),this.formatDate(this.et)];
                    saveCashierHouse(Object.assign(values,{token:this.token(),type:4})).then(res => {
                        if(res.code == 0) {
                            this.$message.success('成功');
                            this.cancel_pay()
                            // this.getHouseInfo()
                            // this.getPayList()
                            this.$refs.table.refresh(true)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            })
        },
        formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        add_time(){
            this.addTimeVisible = true
        },
        cancel__time_pay(){
             this.addTimeVisible = false
        },
        add_time_pay(e){
            e.preventDefault();
            let _this=this;
            this.formTime.validateFields((err, values) => {
                if (err) {
                    for(let key in err){
                    for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
                    }
                }
                values.pay_time=values.pay_time.format('YYYY-MM-DD')
                Object.assign(values,{token:this.token(),id: this.$route.params.house_id,type:4});
                // this.spinning = true;
                this.axios({
                    method:'post',
                    url:'/cashier/add_payto_times',
                    data:values,
                }).then(res => {
                    // this.spinning = false;
                    if(res.code == 0){
                        this.$message.success('添加成功',3);
                         this.getHouseInfo()
                        this.addTimeVisible = false
                    }else this.$message.warning(res.msg);
                }).catch(() => {this.$message.error('服务器发生错误...',2);});
            });
        },
        changeZk(value){
            setTimeout(() => {
               
                let values=this.payform.getFieldValue('zk')?this.payform.getFieldValue('zk'):10;
                if (values > 10 || values < 0) {
                    this.payform.setFieldsValue({
                        zk:0
                    })
                    this.$message.error('请输入正常折扣');return;
                }
                let zkyh=this.user_money-this.allPrice*values/10
                this.allOffer=parseInt((this.allOffer+zkyh)*100)/100
                this.user_money=this.allPrice-this.allOffer
                
            }, 500);
            
        },
        pay() {
            console.log(this.selectArr)

            getHouseUser({id: this.$route.params.house_id,token:this.token(),type:4}).then(res => {
                this.users = res.data
            }).catch(err => {
                console.log(err)
            })
            if(this.selectArr.length <= 0) return this.$message.error('请选择勾选交款的数据');
            this.payVisible = true
            this.$message.warning('请务必绑定住户');
        },
        ok_pay(e) {
            e.preventDefault();
            this.payform.validateFields((err, fieldsValue) => {
                if (!err) {
                    const values = {
                        ...fieldsValue,
                        'arr': this.selectArr,
                        'allPrice': this.allPrice,
                        'user_money': this.user_money,
                        'allOffer': this.allOffer,
                        'allOverdue': this.allOverdue,
                        'allDeduction': this.allDeduction,
                    }
                    housePay(Object.assign(values,{token:this.token()})).then(res => {
                        if(res.code == 0) {
                            this.$message.success('收款成功');
                            setTimeout(() => {
                                this.$router.push({ name: 'charge_be_pay_index'})
                            })
                        }else{
                            this.$message.error(res.msg);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            })
        },
        onCellChange(key, dataIndex, value) {
            setNoPayMoney({id: key, name: dataIndex, value,token:this.token(),type:4}).then(res => {
                // this.getHouseInfo()
                // this.getPayList()
                this.$refs.table.refresh(false)
                let flags=0
                for( let i=0 ;i<this.selectArr.length; i++){
                    if(this.selectArr[i].id==key){
                        flags=1
                    }
                }
               if(this.selectArr.length>0 && flags) {
                    
                   if(dataIndex == 'offer') {
                       this.user_money = parseInt((Number(this.allPrice)-Number(this.allOffer)-Number(this.allDeduction)+Number(this.allOverdue)-Number(value))*100)/100
                   }else{
                       this.user_money = parseInt((Number(this.allPrice)-Number(this.allOffer)-Number(this.allDeduction)+Number(this.allOverdue)+Number(value))*100)/100
                   }
                    
                }
            })
        },
        selectProject(value) {
            getProjectFix({token: this.token(), id: value[1]}).then(res => {
                if (res.data.style == 1) {
                    this.one_price = res.data.price;
                    this.one_num = 1;
                    this.form.setFieldsValue({
                        price: res.data.price,
                        num: 1,
                        money: res.data.price
                    })
                } else if (res.data.style == 3) {
                    this.one_price = res.data.fixed_price;
                    this.one_num = 1;
                    this.form.setFieldsValue({
                        price: res.data.fixed_price,
                        num: 1,
                        money: res.data.fixed_price
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }   
  }
</script>

<style scoped>
    .shou_color{
        color: #fff;
        background-color: #47c479;
        border-color: #47c479;
    }
</style>